<template>
  <a-form>
    <a-row :gutter="24">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="分类">
          <!-- <a-input v-model="queryParam.year" allowClear placeholder="" /> -->
          <treeselect :show-count="true" :options="Dept" v-model="queryParam.categoryTypeID" placeholder="请选择" :normalizer="normalizer" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="是否发送">
          <a-select v-model="queryParam.isSend" size="small" style="width: 100%">
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="标题">
          <a-input v-model="queryParam.title" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="内容">
          <a-input v-model="queryParam.context" />
        </a-form-item>
      </a-col>
      <a-col :lg="10" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="发送时间">
          <a-range-picker :ranges="{
                  今天: [moment(), moment()],
                  一周内: [moment(), moment().endOf('week')],
                  一月内: [moment(), moment().endOf('month')],
                  一年内: [moment(), moment().endOf('year')]
                }" style="width: 100%" @change="onChangeDate" />

        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item :style="{ float: 'right' }">
          <a-button style="margin-left: 14px;" @click="onSearch" type="primary">查询</a-button>

        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'
import { deleteChildrenIfNull2 } from '@/utils/util'
import { authDevice } from '@/utils/mixin'
import { getCategoryTree } from '@/api/category';
import Treeselect from '@riophae/vue-treeselect'
import moment from 'moment'


const userInfo = Vue.ls.get(ACCESS_TOKEN)

export default {
  name: 'SearchForm',
  mixins: [authDevice],
  components: { Treeselect, moment },
  props: {
    area: {
      type: String,
      require: false
    },
    query: {
      type: Object,
      require: false
    }
  },
  data () {
    return {
      normalizer (node) {
        return {
          id: node.id,
          label: node.CategoryName,
          children: node.Children
        }
      },
      Dept: [],
      queryParam: {
        categoryTypeID: '',
        isSend: undefined,
        sendTimeStart: '',
        sendTimeEnd: '',
        title: '',
        context: ''
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },

    }
  },
  watch: {

  },
  computed: {},
  created () {
    this.initTree()
  },
  mounted () { },
  methods: {
    moment,
    onSearch () {

      this.$emit('onSearch', Object.assign(this.queryParam,
        { isSend: this.queryParam.isSend && this.queryParam.isSend == 1 ? true : this.queryParam.isSend && this.queryParam.isSend == 0 ? false : undefined }
      ))
    },

    onChangeDate (dates, dateStrings) {

      this.queryParam.sendTimeStart = dateStrings[0]
      this.queryParam.sendTimeEnd = dateStrings[1]
    },

    initTree () {
      getCategoryTree().then(res => {

        this.Dept = res.data
      })
    },
  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
